import { h,computed} from "vue";
import { ElFormItem, ElTooltip,formItemContextKey } from "element-plus";
export default {
    name: "FormItem",
    props: {
        col: {
            type: [String, Number],
            default: "1"
        },
        label: {
            type: String
        },
        tip: {
            type: String
        },
        tipType: {
            type: String,
            default: "hover",//hover,alway
        },
        warning: {
            type: String
        },
        warningType: {
            default: "alway",//hover,alway
        },
        prop:{

        },
        inject:[formItemContextKey],

    },
    setup(props, { slots }) {
        // let { col, label, warning, warningType, tip, tipType,prop } = props;

   
       
        const ItemClass = computed(()=>{
            let colClass = "zy-formitem-" + props.col;
            return ["zy-formitem", colClass]
        });
        
        return () => {
            return h(ElFormItem, {
                class: ["zy-formitem", ItemClass.value],
                prop:props.prop,
            }, {
                ...slots,
                label: () => {
                    if (props.warning) { //警告
                        if (props.warningType == "hover") {
                            return h("div", {
                                class: ["zy-formitem-label"]
                            }, [
                                h("span", props.label),
                                h(ElTooltip, {
                                        placement: "right",
                                        effect:"light"
                                    }, 
                                    {
                                        default:()=>{
                                            return h("i", {
                                                class: ["zy-font", "warning-icon"],
                                                innerHTML: "&#xe63b;"
                                            })
                                        },
                                        content:()=>h("span",{
                                            class: ["zy-formitem-warning"]
                                        },props.warning)

                                    }
                                )

                            ])

                        } else if(props.warningType == "alway"){
                            return h("div", {
                                class: ["zy-formitem-label"]
                            }, [
                                h("span", props.label),
                                h("i", {
                                    class: ["zy-font", "warning-icon"],
                                    innerHTML: "&#xe63b;"
                                }),
                                h("span", {
                                    class: ["zy-formitem-warning"]
                                }, props.warning)
                            ])
                        }else{
                            console.warn("FormItem的warning只能为hover或alway")
                        };

                    } else if (props.tip) {   //tip
                        if (props.tipType == "hover") {
                            return h("div", {
                                class: ["zy-formitem-label"]
                            }, [
                                h("span", props.label),
                                h(ElTooltip, {
                                        placement: "right",
                                        effect:"light"
                                    }, 
                                    {
                                        default:()=>{
                                            return h("i", {
                                                class: ["zy-font", "tip-icon"],
                                                innerHTML: "&#xe648;"
                                            })
                                        },
                                        content:()=>h("span",{
                                            class: ["zy-formitem-tip"]
                                        },props.tip)

                                    }
                                )

                            ])

                        } else if(props.tipType == "alway"){
                            return h("div", {
                                class: ["zy-formitem-label"]
                            }, [
                                h("span", props.label),
                                h("i", {
                                    class: ["zy-font", "tip-icon"],
                                    innerHTML: "&#xe648;"
                                }),
                                h("span", {
                                    class: ["zy-formitem-tip"]
                                }, props.tip)
                            ])
                        }else{
                            console.warn("FormItem的tip只能为hover或alway")
                        };
                    } else {
                        return h("span", props.label)
                    }

                }
            })
        };

    }
}


